import Card from "antd/es/card/Card";
import { Button, Checkbox, Form, Input, Select, Space, Spin, InputNumber, Table, DatePicker } from 'antd';
import React, { useContext, useEffect, useRef, useState } from 'react';
import _ from 'lodash';
import { useParams,useHistory } from 'react-router-dom';
import JcdHandle from "../../../../../../utils/apis/JcdHandle";
import FetchHelper from "../../../../../../utils/helper/fetch-helper";
import JcyjApi from "../../../../../../utils/apis/JcyjApi";
import WaiBuZhuanJiaApi from "../../../../../../utils/apis/WaiBuZhuanJiaApi";
import managerContext from "../../../Entry/managerContext";

export default function JcdEdit(props){
   /*  const dynamicForms = [
      {
        "alias": "地点名",
        "name": "name",
        "type": "input"
    },
    {
        "alias": "地点全名",
        "name": "ps",
        "type": "input"
    },

    {
        "alias": "区县",
        "name": "qx",
        "type": "input"
    },
    {
        "alias": "开始时间",
        "name": "begin",
        "type": "input"
    },
    {
        "alias": "结束时间",
        "name": "end",
        "type": "input"
    },
    {
        "alias": "时间",
        "name": "tm",
        "type": "input"
    },
    {
        "alias": "类型",
        "name": "type",
        "type": "input"
    },
    {
        "alias": "平均气温",
        "name": "data",
        "type": "input"
    },
    ] */
  const [idDatas, setIdDatas] = useState();
  const [loading, setLoading] = useState(); 
  const [dynamicForms,setDynamicForms]=useState();
  const { looktype } = useContext(managerContext);
  const [form] = Form.useForm();
  const [xqDatas, setXqDatas] = useState();
  const [xqJson, setXqJson] = useState({})

  const [params, setParams] = useState({
    pageSize: 10,
    pageNum: 1,
    jcdlx: '河道'
  })
  const id=useParams()?.id;
  
//   useEffect(()=>{
//     JcdHandle.jcdXqDynamicApi().then(datas=>{
//       setXqDatas(datas)
//     })
//   },[])
useEffect(() => {
  const dynamicForms1 = [[
      {
          "alias": "地点名",
          "name": "name",
          "type": "input"
      },
      {
          "alias": "地点全名",
          "name": "ps",
          "type": "input"
      },

      {
          "alias": "区县",
          "name": "qx",
          "type": "input"
      },
      {
          "alias": "开始时间",
          "name": "begin",
          "type": "input"
      },
      {
          "alias": "结束时间",
          "name": "end",
          "type": "input"
      },
      {
          "alias": "时间",
          "name": "tm",
          "type": "input"
      },
      {
          "alias": "类型",
          "name": "type",
          "type": "input"
      },
      {
          "alias": "平均气温",
          "name": "data",
          "type": "input"
      },

  ],
  [
      {
          "alias": "参考地址",
          "name": "ckdd",
          "type": "input"
      },
      {
          "alias": "参考位置",
          "name": "ckwz",
          "type": "input"
      },
      {
          "alias": "发震时间",
          "name": "fzsj",
          "type": "input"
      },
      {
          "alias": "震级",
          "name": "zj",
          "type": "input"
      },
      {
          "alias": "经度",
          "name": "jd",
          "type": "input"
      },
      {
          "alias": "纬度",
          "name": "wd",
          "type": "input"
      },
      {
          "alias": "深度",
          "name": "sd",
          "type": "input"
      },
      {
          "alias": "详情",
          "name": "xq",
          "type": "input"
      },
      {
          "alias": "创建人",
          "name": "createBy",
          "type": "input"
      },
      {
          "alias": "创建时间",
          "name": "createTime",
          "type": "input"
      },
      {
          "alias": "最后更新人",
          "name": "updateBy",
          "type": "input"
      },
      {
          "alias": "最后更新时间",
          "name": "updateTime",
          "type": "input"
      },
      {
          "alias": "操作人员",
          "name": "czry",
          "type": "input"
      },
      {
          "alias": "录入人",
          "name": "lrr",
          "type": "input"
      },
      {
          "alias": "录入时间",
          "name": "lrsj",
          "type": "input"
      },

  ]]
  if (looktype === '气象数据') {
      setDynamicForms(dynamicForms1[0]);
      WaiBuZhuanJiaApi.Idlist({ id: id }).then(resp => {
          console.log('22', id,looktype,resp )
          setIdDatas(resp.rows)
          //let xqLookData=JSON.parse(resp.rows.xq)
          form.setFieldsValue(//
              ...resp.rows,
          )
      })
  } else if (looktype === '灾害结果') {
      setDynamicForms(dynamicForms1[1]);
      WaiBuZhuanJiaApi.Iddzlist({ id: id }).then(resp => {
          console.log('22', id,looktype,resp )
          setIdDatas(resp.rows)
          //let xqLookData=JSON.parse(resp.rows.xq)
          form.setFieldsValue(//
              ...resp.rows,
          )
      })
  }

}, [id, form,looktype])

  const history=useHistory();
  const quxiaoHandle=()=>{
    history.push(`/manager/wbzjsj`)
  }

  const onFinish=(values)=>{
    for(const key in idDatas){
      if(values.hasOwnProperty(key)){
        idDatas[key]=values[key]
      }
    }
    idDatas.xq=JSON.stringify(values.xqJson)
    FetchHelper.putJson(`/admin-api/ybyj/jcd`,idDatas).then(resp=>{ alert("修改成功") }).catch(err => { alert("修改失败") })
  }
    return <div className='layout-h h100' style={{
        overflow: "scroll"
      }}>
         <Card className='h100 fill' style={{
      height: "1500px"
    }}>
      <Form method="post"
        onFinish={onFinish}
        form={form}>
        <header style={{
          fontSize: 20,
          fontWeight: "bold"
        }}>预警数据信息</header>
        <hr />

        <div className="InputForm" style={{
          display: "flex",
          flexWrap: "wrap"
        }}>
          {idDatas !== undefined && dynamicForms !== undefined && dynamicForms.map((formItem) => {
            let node;
            switch (formItem.type) {
              case 'select':
                node = <Select></Select>;
                break;
              case 'input':
              default:
                node = <Input style={{
                  width: "90%"
                }}
                  onChange={(e) => {

                  }}

                />
            }
            return <div style={{
              flexBasis: "33%",
              marginBottom: "10px"
            }}><Form.Item
              label={formItem.alias}
              name={formItem.name}

              rules={[
                {
                  required: true,

                }
              ]}

            >
                {node}
              </Form.Item></div>

          })}

        </div>
        {/* <div className="InputForm" style={{
          display: "flex",
          flexWrap: "wrap"
        }}>
          <header style={{
            fontSize: 20,
            fontWeight: "bold",

          }}>详情编辑:</header>
          <div className="InputForm" style={{
            display: "flex",
            flexWrap: "wrap"
          }}>
            {idDatas !== undefined && xqDatas !== undefined && xqDatas.map((formItem) => {
              let node;
              switch (formItem.type) {
                case 'select':
                  node = <Select></Select>;
                  break;
                case 'input':
                default:
                  node = <Input style={{
                    width: "90%"
                  }}
                    onChange={(e) => {

                    }}

                  />
              }

              return <div style={{
                flexBasis: "33%",
                marginBottom: "10px"
              }}>
                <Form.Item
                  label={formItem.alias}
                  name={['xqJson', formItem.name]}
                >
                  {node}
                </Form.Item></div>

            })}

          </div>
        </div> */}

        <div className="layout-h">
          <Button className="btn1" type="primary"
            htmlType="submit" 
            //onClick={baocunHandle}
          >保存</Button>

          <Button onClick={quxiaoHandle} className="btn2">返回</Button>
        </div>
      </Form>
    </Card>
      </div>
}